<style src="@style/common.less" lang="less" type="text/css" scoped></style>
<style lang='scss'>
    logPassword .ivu-input-wrapper{
        z-index: 700 !important;
    }
</style>
<style lang="scss" scoped>
    .nc-error {
        position: absolute;
        top: -20px;
        left: 0;
        line-height: 1;
        color: #ed3f14
    }
    .login-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /*padding: 119px 0 0px 0;*/
        .login-body {
            flex-shrink: 1;
            height: calc(100% - 0rem);
            width: 100%;
            background: url("/static/images/login/login_bg.png") no-repeat center center;
            background-size: cover;
            .login-body-container {
                width: 50rem;
                height: 32rem;
                .login-body-top {
                    height: 6rem;
                    .title-contain {
                        text-align: center;
                        .title-ch {
                            height: 2.063rem;
                            font-family: MicrosoftYaHei-Bold;
                            font-size: 2.026rem;
                            font-weight: normal;
                            font-stretch: normal;
                            letter-spacing: 0.1rem;
                            color: #ffffff;
                        }
                        .title-en {
                            margin-top: 0.563rem;
                            height: 1rem;
                            font-family: MicrosoftYaHei;
                            font-size: 0.875rem;
                            font-weight: normal;
                            font-stretch: normal;
                            line-height: 1.125rem;
                            letter-spacing: 0.044rem;
                            color: #ffffff;
                            opacity: 0.6;
                        }
                    }
                }
                .login-body-bottom {
                    height: 26rem;
                    .login-body-bottom-left {
                        width: 50%;
                        height: 100%;
                        background: url("/static/images/login/login_add.png") no-repeat;
                        background-size: cover;
                        border-radius: 0.375rem 0rem 0rem 0.375rem;
                    }
                    .login-body-bottom-right {
                        width: 50%;
                        height: 100%;
                        background-color: #ffffff;
                        border-radius: 0rem 0.375rem 0.375rem 0rem;
                        padding: 0 3.125rem;
                        .logintitle {
                            height: 1.125rem;
                            font-family: MicrosoftYaHei;
                            font-size: 1.125rem;
                            font-weight: normal;
                            font-stretch: normal;
                            line-height: 1.125rem;
                            letter-spacing: 0.056rem;
                            color: #23262b;
                            margin-bottom: 1.813rem;
                        }
                        .nc {
                            height: 50px;
                            width: 100%;
                            margin-bottom: 24px;
                        }
                    }
                }
            }
        }
        .login-bottom {
            flex-shrink: 0;
            height: 2.75rem;
            background-color: #ffffff;
            padding-left: 3.188rem;
            padding-right: 3.125rem;
            font-family: MicrosoftYaHei;
            font-size: 0.875rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 1.125rem;
            letter-spacing: 0rem;
            color: #666666;
            .downapp {
                position: relative;
                .qr-bg {
                    background: url("/static/images/login/erweima_bg2.png") no-repeat center center;
                    background-size: contain;
                    width: 128px;
                    height: 120px;
                    padding: 5px 10px 10px 10px;
                    position: absolute;
                    bottom: 1.9rem;
                    right: -2rem;
                    z-index: 999;
                }
            }
            .login-icon-liulanqi {
                width: 1.188rem;
                height: 1.125rem;
                background: url("/static/images/login/login_icon_liulanqi.png") no-repeat;
                background-size: contain;
                margin-right: 0.625rem;
            }
        }
        .logo {
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            width: 5.938rem;
            height: 3.375rem;
        }
        .login-box {
            background-color: #ffffff;
            border-radius: 6px;
            margin: 37px auto 0 auto;
            width: 490px;
            .login-login {
                padding: 58px 50px 0px 50px;
                .form-box {
                    margin-top: 40px;
                }
            }
            .log-foot {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                color: #23262b;
                padding: 0px 50px 0px 50px;
                background-color: #f8f9fc;
                .login-foot {
                    align-items: center;
                    padding: 15px 0;
                    display: flex;
                    justify-content: center;
                    border-radius: 0px 0px 6px 6px;
                    .foot-item {
                        font-size: 14px;
                        color: #23262b;
                        position: relative;
                    }
                    .icon-ios {
                        width: 1rem;
                        height: 1.25rem;
                    }
                    .icon-and {
                        width: 1.125rem;
                        height: 1.25rem;
                    }
                }
                .foot-item-jiange {
                    border-left: solid 2px #e5e5e5;
                }
            }
        }
        .ios-qr {
            width: 100px;
            height: 100px;
        }
        .and-qr {
            background: url("/static/images/login/andqr.jpg") no-repeat center center;
            background-size: contain;
            width: 100px;
            height: 100px;
        }
    }
    @font-face {
        font-family: "custom-font";
        src: url('data:application/x-font-woff;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAPCAMAAADXs89aAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABHVBMVEWirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMeirMcAAABGSqLHAAAAXXRSTlMADzuV0/n9151IA0fN2lwKms9sTGrLtBPHnAQBg9QYt9AnZy22wWBk+PtCcjKo5c43m6seX28q6/E0V2HF3gsSRRUFsxzgtQ4JosAaxOOJZofi/owCuj2LwuT3uX0ITg53AAAAAWJLR0ReBNZhuwAAAAd0SU1FB+MIFgoNInRfOnEAAADWSURBVBjTZZDXVsJQEEUPCAYDikoRCV0xIk1BpUikgwqihKZC/v83uDMQFms5D3P3nocpF9iFBf/CemCzG4eS40jeKzpdhhnHJ2bRfUp+du7x+gj8F5uWAZLLoEAlRBiOEEYJYzLiiSvgmiQpBtxwSxXWWyPlxB1bGpAYMsiKHEWELScjz3CPB5ELKLJJCh4ZnvBcMsoVVNleALlGoL2i3miixQe0acFOl7DXF/j2Tvjh5sUHQ5LP0df3WLz6pLU9c6pq5u36rLL3Kcp88fP7py1X8W1hDaBZPEAjWNvDAAAAAElFTkSuQmCC') format('woff');
    }
    .i-icon {
        display: inline-block;
        font-family: 'custom-font' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-rendering: auto;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        vertical-align: middle;
    }
</style>
<style>
    .login-container .ivu-form-item:nth-child(3) .ivu-input {
        width: 100% !important;
    }
    .nc_scale {
        height: 50px !important;
        background: #e8e8e8; /* 默认背景色 */
    }
    .nc_scale .btn_slide {
        height: 50px !important;
        line-height: 50px !important;
    }
    .nc_scale .btn_ok {
        height: 50px !important;
        line-height: 50px !important;
    }
    .nc_scale .scale_text {
        color: #9c9c9c; /* 默认字体颜色 */
        line-height: 50px !important;
    }
    .nc-container .imgCaptcha {
        top: 50px !important;
    }
    .nc-container .imgCaptcha, .nc-container .clickCaptcha {
        width: 100% !important;
    }
    .nc_scale div.nc_bg {
        background: #7ac23c; /* 滑过时的背景色 */
    }
    .nc_scale .scale_text2 {
        color: #fff; /* 滑过时的字体颜色 */
    }
    .nc_scale span {
        border: 1px solid #ccc;
        background: #fff url("//g.alicdn.com/sd/ncpc/images/rt.png") no-repeat center;
    }
    .nc_scale .btnok {
        background: #fff url("//g.alicdn.com/sd/ncpc/images/yes.png") no-repeat center;
    }
    .errloading {
        border: #faf1d5 1px solid;
        background: url("//g.alicdn.com/sd/ncpc/images/no.png") #fffff0 no-repeat 10px 9px;
        color: #ef9f06;
    }
</style>
<template>
    <!--<div class="login-container" :style="{backgroundImage:'url(/static/images/login/login_bg.png)'}">-->
    <div class="login-container" >
        <div class="login-body yolo-x-center">
            <div class="yolo-y-center">
                <div class="login-body-container">
                    <div class="login-body-top yolo-x-center">
                        <div class="yolo-x-start">
                            <img class="logo" src="/static/images/login/signin_logo.png"/>
                            <div style="width: 0.188rem; height: 3.375rem; background-color: purple; margin: 0 1.188rem;"></div>
                            <div class="title-contain">
                                <!--<div class="title-ch css27bc417a0923487"></div>-->
                                <div class="css27bc417a0923487" style="height: 2.063rem;
                                font-size: 2.026rem;
                                font-weight: normal;
                                font-stretch: normal;
                                color: purple;
                                letter-spacing: 0.1rem;">创客民宿运营管理平台</div>
                            </div>
                        </div>
                    </div>
                    <div class="login-body-bottom yolo-x-start">
                        <div class="login-body-bottom-left"></div>
                        <div class="login-body-bottom-right yolo-y-center">
                            <Form ref="formValidate" :model="formLogin" :rules="ruleValidate" class="form">
                                <div class="logintitle yolo-x-center">登录平台</div>
                                <Form-item prop="account">
                                    <Input type="text" v-model="formLogin.account" placeholder="请输入用户名/手机号"
                                           @on-enter="handleSubmit('formValidate')" ref="password">
                                        <Icon type="ios-person-outline" />
                                        <Icon type="ios-person" size="24" slot="prepend"></Icon>
                                    </Input>
                                </Form-item>
                                <div style="position: relative">
                                    <Form-item prop="password">
                                        <Input :type="this.noViewPass === true ? 'password' : 'text'" v-model="formLogin.password" placeholder="请输入登录密码"
                                               @on-enter="handleSubmit('formValidate')" >
                                            <Icon type="ios-lock" size="24" slot="prepend"></Icon>
                                        </Input>
                                    </Form-item>

                                </div>
                                <div class="login-loading" v-show="loginLoading">
                                    <Spin fix class="spin">
                                        <Icon type="load-c" size=18 class="spin-icon-load"></Icon>
                                        <div>登录中...</div>
                                    </Spin>
                                </div>
                                <Form-item v-show="!loginLoading" class="login-button">
                                    <Button type="primary" @click="handleSubmit('formValidate')">登录</Button>
                                </Form-item>

                            </Form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--<div class="login-bottom yolo-x-between">
            <div class="yolo-x-start"></div>
            <div class="yolo-x-start" @mouseover="enter()" @mouseout="leave()">
              <div class="yolo-y-center">
                <div style="margin-right: 0.625rem;">
                  <img style="width: 1rem; height: 1.25rem;" src="/static/images/login/login_icon_ios.png"/>
                </div>
              </div>
              <div class="yolo-y-center">
                <div style="margin-right: 0.625rem;">
                  <img  style="width: 1.125rem; height: 1.25rem;" src="/static/images/login/login_icon_anzhuo.png"/>
                </div>
              </div>
              <div class="foot-item yolo-y-center">
                <div class="downapp">APP下载
                  <div class="qr-bg" v-if="ctl.ios" id="qr-bg">
                    <img :src=this.sysConfig.qr_code style="width: 100%;height: 100%"/>
                  </div>
                </div>
              </div>
              <div class="yolo-y-center">
                <div style="width: 0.063rem; height: 1.25rem; background-color: #e5e5e5; margin: 0 1.25rem;"></div>
              </div>
              <div class="yolo-y-center">
                <div class="yolo-x-start">
                  <div class="login-icon-liulanqi"></div>
                  <div>
                    <a style="color: #666666;" href="/static/html/browserdown.html" >推荐浏览器下载</a>
                  </div>
                </div>
              </div>
            </div>
        </div>-->
    </div>
</template>
<script>
    import autoLoad from '@/libs/autoLoad';
    import nodeForge from 'node-forge';

    export default {
        data() {
            return {
                publicPath: process.env.BASE_URL,
                sysConfig: {},
                ctl: {
                    ios: false
                },
                formLogin: {
                    account: '',
                    password: '',
                    code: '',
                    validaCode: ''
                },
                ruleValidate: {
                    account: [
                        {required: true, message: '请填写帐号', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请填写密码', trigger: 'blur'}
                        //, {type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur'}
                    ]
                },
                verifyUrl: 'zoom-fleet/sys/login/captcha.jpg?t_=' + new Date().getTime(),
                loginLoading: false,
                copyRightTime: new Date().getFullYear(),
                NCOpt: null,
                appKey: 'FFFF0N00000000007763',
                moveValidFlag: false,
                ncErrorFlag: false,
                noViewPass: true
            };
        },
        methods: {
            handleSubmit(name) {
                //替换空格
                this.formLogin.password = this.formLogin.password.trim();
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        //胖子说的 不要用小写
                        //this.formLogin.password = this.formLogin.password.toLowerCase();
                        this.formLogin.password = this.formLogin.password.trim();
                        let md = nodeForge.md.sha256.create();
                        md.update(this.formLogin.password);
                        let userPassword = md.digest().toHex();
                        let params = {
                            account: this.formLogin.account,
                            password: userPassword,
                            code: this.formLogin.code
                        };
                        this.request('newLogin', params, false).then((res) => {
                            this.loginLoading = false;
                            let expireTime = res.userInfo.expireTime;
                            expireTime = parseInt(expireTime) + parseInt(window.expireTime);
                            res.userInfo.expireTime = expireTime;
                            window.sessionStorage.setItem('loginInfo', JSON.stringify(res.userInfo));
                            window.sessionStorage.setItem('loginToken', res.token);
                            setTimeout(() => {
                                this.$router.push({path: '/'});
                            }, 1000);
                        }).catch(() => {
                            this.loginLoading = false;
                            this.$router.push({path: '/login'});
                        });
                    } else {
                        this.$Message.error('登录信息错误');
                    }
                });
            },
            refreshVerify() {
                this.verifyUrl = '/zoom-fleet/sys/login/captcha.jpg?t_=' + new Date().getTime();
            },
            getSysConfig() {
                this.request('getSysConfig', {}, false).then((res) => {
                    this.sysConfig = res;
                    window.sessionStorage.setItem('sysConfig', JSON.stringify(res));
                }).catch((error) => {
                    console.log(error);
                });
            },
            respSmsVaild(res) {
                this.$refs.smsVaild.close();
                if (res.code) {
                    this.request('newlogin', res, false).then((res) => {
                        this.loginLoading = true;
                        let expireTime = res.userInfo.expireTime;
                        expireTime = expireTime + window.expireTime;
                        res.userInfo.expireTime = expireTime;
                        window.sessionStorage.setItem('loginInfo', JSON.stringify(res.userInfo));
                        window.sessionStorage.setItem('loginToken', res.token);
                        console.log(res);
                        setTimeout(() => {
                            this.$router.push({path: '/'});
                        }, 1000);
                    }).catch(() => {
                        this.loginLoading = false;
                        this.$router.push({path: '/login'});
                    });
                }
            },
            enter() {
                this.ctl.ios = true;
            },
            leave() {
                this.ctl.ios = false;
            },
            initMoveValid() {
                let self = this;
                let ncToken = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
                this.NCOpt = {
                    renderTo: '#nc',
                    appkey: this.appKey,
                    scene: 'nc_login',
                    token: ncToken,
                    trans: {'key1': 'code0'},
                    is_Opt: 0,
                    language: 'cn',
                    isEnabled: true,
                    timeout: 3000,
                    times: 5,
                    apimap: {
                        // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
                        // 'get_captcha': '//b.com/get_captcha/ver3',
                        // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
                        // 'get_img': '//c.com/get_img',
                        // 'checkcode': '//d.com/captcha/checkcode.jsonp',
                        // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
                        // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
                        // 'umid_serUrl': 'https://g.com/service/um.json'
                    },
                    callback: function (data) {
                        self.moveValidFlag = true;
                        self.ncErrorFlag = false;
                        window.console && console.log(ncToken);
                        window.console && console.log(data.csessionid);
                        window.console && console.log(data.sig);
                    }
                };
                autoLoad('https://g.alicdn.com/sd/ncpc/nc.js?t_=' + new Date().getTime(), function () {
                    self.generarte();
                });
            },
            generarte() {
                let NnoCaptcha = window.noCaptcha;
                let nc = new NnoCaptcha(this.NCOpt);
                nc.upLang('cn', {
                    _startTEXT: '请按住滑块，拖动到最右边',
                    _yesTEXT: '验证通过',
                    _error300: '哎呀，出错了，点击<a href=\'javascript:__nc.reset()\'>刷新</a>再来一次',
                    _errorNetwork: '网络不给力，请<a href=\'javascript:__nc.reset()\'>点击刷新</a>'
                });
            },
            changPwd() {
                this.noViewPass = !this.noViewPass;
            }
        },
        mounted() {},
        components: {}
    };
</script>
